<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 折叠面板</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/validation.css" />
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
		<script src="js/jquery-3.2.1.js" type="text/javascript"></script>
		<script src="js/taglist.js" type="text/javascript"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
		<script src="js/jquery.pagination.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
		<script type="text/javascript">
			/*提交ajax请求*/
			$.validator.setDefaults({
				submitHandler: function() {
					$("#addTag").click(function() {
						var name = $("#name").val();
						$.ajax({
	  						"url":"/tag/save",
							"type": "post",
							"data": {
								"name": name
							},
							"dataType": "json",
							"success": function(result) {},
						});
						window.location.reload();
					});
				}
			});

			$(document).ready(function() {
				// 在键盘按下并释放及提交后验证提交表单
				$("#defaultForm").validate({
					rules: {
						firstname: "required",
						tagName: {
							required: true,
							minlength: 2
						},
						agree: "required"
					},
					messages: {
						firstname: "请输入名称",
						tagName: {
							required: "请输入名称",
						},
					}
				});

				var itemHTML;
				$.ajax({
					url: "/tag/findByPage",
					type: "get",
					data: {
						size: 5, //我把行数传回给服务器中
						page: 0 //显示第一页的数据
					},
					dataType: "json",
					success: function(result) {
						console.log(result);
						sumCount = result.data.totalElements;
						count = result.data.pageable.pageSize;
						$.each(result.data.content, function(index, element) {
							var unixTimestamp = new Date(element.createTime);
							commonTime = unixTimestamp.toLocaleString();
							itemHTML += "<tr>" +
								"<td>" +
								"<input type='checkbox' name='item' value=" + element.id + ">" +
								"</td>" +
								"<td>" +
								element.name +
								"</td>" +
								"<td>" +
								commonTime +
								"</td>" +
								"<td>" +
								"<input type='hidden'  class='hid' value=" + element.id + ">" +
								"<input type='button' name='delete' value='删除' class='btn btn-danger'onclick=\"deleteById('" + element.id + "')\"/>&nbsp;" +
								"<input type='hidden'  class='hid' value=" + element.name + ">" +
								"<input type='button' name='change' value='修改' class='btn btn-info' data-toggle='modal' data-target='#mytagchange' onclick=\"getSeatingCarMark('" + element.id + "')\"/>&nbsp;" +
								"</td>" +
								"</tr>";

						});
						$("#listTable").html(itemHTML);
						itemHTML = "";
						var pageCount = Math.ceil(sumCount / count); //这里50除以10等于5，所以一共有5页
						$('.M-box').pagination({
							pageCount: pageCount,
							jump: true,
							coping: true,
							homePage: '首页',
							endPage: '末页',
							prevContent: '上页',
							nextContent: '下页',
							callback: function(api) {
								console.log(result);
								$.ajax({
									url: "/tag/findByPage",
									type: "get",
									data: {
										size: 5,
										page: api.getCurrent() - 1 // 非常关键的一步，这里就要用到api接口的方法中获取当前页
									},
									dataType: "json",
									success: function(result) {
										console.log(result);
										var itemHTML1;
										$.each(result.data.content, function(index, element) {
											var unixTimestamp = new Date(element.createTime);
											commonTime = unixTimestamp.toLocaleString();
											itemHTML1 += "<tr>" +
												"<td>" +
												"<input type='checkbox' name='item' value=" + element.id + ">" +
												"</td>" +
												"<td>" +
												element.name +
												"</td>" +
												"<td>" +
												commonTime +
												"</td>" +
												"<td>" +
												"<input type='hidden'  class='hid' value=" + element.id + ">" +
												"<input type='button' name='delete' value='删除' class='btn btn-danger' onclick=\"deleteById('" + element.id + "')\"/>&nbsp;" +
												"<input type='hidden'  class='hid' value=" + element.name + ">" +
												"<input type='button' name='change' value='修改' class='btn btn-info' data-toggle='modal' data-target='#mytagchange' onclick=\"getSeatingCarMark('" + element.id + "')\"/>&nbsp;" +
												"</td>" +
												"</tr>";

										});
										$("#listTable").html(itemHTML1);
									}

								});
							}

						});
					}
				});
			});

			function getSeatingCarMark(element) {
				//	$("#namec").val(name);
				//	$("#idc").val(id);
				console.log(element);
				$.ajax({
					"url": "/tag/findById?id=" + element,
					"type": "get",
					"dataType": "json",
					"success": function(result) {
						$("#namec").val(result.data.name);
						$("#idc").val(result.data.id);
					},
					"error": function() {
						alert("出现错误！");
					}
				});
			};

			function deleteById(element) {
				$.confirm({
					title: '警告',
					content: '您是否要删除此条数据?',
					type: 'red',
					typeAnimated: true,
					buttons: {
						tryAgain: {
							text: '确定',
							btnClass: 'btn-red',
							action: function() {
								$.ajax({
									"url": "/tag/deleteById?id=" + element,
									"type": "get",
									"data": "",
									"dataType": "json",
									success: function(response) {
										var dd1 = $(this).parent(); //列表框id
										dd1.hide();
										dd1.remove();
										window.location.reload();

									}

								});
							}
						},
						close: function() {
							text: '取消'
						}
					}
				});
			};
		</script>
	</head>

	<body>
		<table class="table table-hover table-bordered" id="mytable1">
			<thead>
				<tr>
					<th>选中</th>
					<th>标签名称</th>
					<th>创建时间</th>
					<th>操作</th>
				</tr>
				<tr>
					<td><input type="checkbox" onclick="checkAll(this)" /></td>
					<td colspan="2">
						<a href="avascript:void(0)" class="btn btn-danger" role="button" onclick="delAll(this)" id="delall">全部删除</a>
					</td>
					<td>
						<button class="btn btn-primary" data-toggle="modal" data-target="#mytag">
             					添加
								</button>
					</td>
				</tr>
			</thead>
			<tbody id="listTable">
			</tbody>
		</table>
		<div class="M-box"></div>

		<div class="modal fade bs-example-modal-lg" id="mytag" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 800px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h3 class="modal-title" id="myModalLabel">
							添加标签
						</h3>
					</div>
					<div class="modal-body">
						<form id="defaultForm">
							<table class="table table-hover table-bordered" id="mytable2">
								<tr>
									<th>标签名称</th>
									<td><input type="text" name="tagName" class="form-control" id="name" /></td>
								</tr>
								<tr>
									<td colspan="2">
										<input type="reset" value="重置" class="btn btn-primary" id="reset" />
										<input type="submit" value="提交" class="btn btn-success" id="addTag" />
									</td>
								</tr>
							</table>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>

					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<div class="modal fade bs-example-modal-lg" id="mytagchange" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 800px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h3 class="modal-title" id="myModalLabelc">
							修改标签
						</h3>
					</div>
					<div class="modal-body">
						<form>
							<table class="table table-hover table-bordered" id="mytablec">
								<tr>
									<th>标签名称</th>
									<td>
										<input type="text" name="" class="form-control" id="namec" />
										<input type="hidden" name="" class="form-control" id="idc" />
									</td>

								</tr>
								<tr>
									<td colspan="2">
										<input type="reset" value="重置" class="btn btn-primary" id="resetc" />
										<input type="button" value="提交" class="btn btn-success" id="change" />
									</td>
								</tr>
							</table>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>

					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
	</body>

</html>